<template>
    <div>
        <!-- 第一层区域 -->
        <el-row>
            <el-col :span="18">
                <el-select v-model="param.classId" placeholder="请选择">
                    <el-option v-for="(item,index) in classes" :key="index" :label="item.className"
                        :value="item.id"></el-option>
                </el-select>
                <el-select v-model="param.wokeId" placeholder="请选择">
                    <el-option v-for="(item,index) in wakes" :key="index" :label="item.title"
                        :value="item.id"></el-option>
                </el-select>
                <span v-if="endTimeFalt">&nbsp;&nbsp;该试卷截止答题</span>
                <span v-if="!endTimeFalt">&nbsp;&nbsp;该试卷还未截止答题</span>
                <span>&nbsp;&nbsp;结束时间: {{endTime}}</span>
            </el-col>

            <el-col :span="6">
                <div>
                    <el-button type="primary" @click="downloadExcel()">下载成绩单</el-button>
                </div>
            </el-col>
        </el-row>
        <!-- 主体部分 -->
        <el-table :data="tableDate" style="width: 100%">
            <el-table-column type="index" label="序号" width="150"></el-table-column>
            <el-table-column prop="username" label="姓名" width="250">
            </el-table-column>
            <el-table-column prop="studentNumber" label="学号" width="250">
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <div>{{scope.row.scoreState===1?"已批改":"未批改或者未提交"}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="score" label="分数">
            </el-table-column>
        </el-table>
    </div>
</template>



<script>
    import axios from "axios";
    export default {
        watch: {
            'param.classId': { // 监视param对象中的classId属性变化  
                handler(newVal) {
                    this.getWorks()
                },
            },
            'param.wokeId': { // 监视param对象中的classId属性变化  
                handler(newVal) {
                    this.getWorkScores()
                    this.getEndTime()
                },
            },
        },
        created() {
            this.getCalssList()
        },
        data() {
            return {
                endTimeFalt:false,
                endTime: null,
                classes: null,
                wakes: null,
                param: {
                    classId: null,
                    wokeId: null,
                },
                tableDate: null,
            }
        },

        methods: {

            // 成绩下载
            async downloadExcel() {
                try {
                    const params = {
                        classId: this.param.classId,
                        workId: this.param.wokeId
                    };
                    // 设置文件下载明
                    let className = this.classes.find(item => item.id === this.param.classId).className
                    let workName = this.wakes.find(item => item.id ===this.param.wokeId).title
                    let fileName = className + "_" + workName + ".xlsx";

                    const response = await axios({
                        method: 'get',
                        url: 'http://127.0.0.1:8000/teacher/grades/getScoreExcel',
                        responseType: 'arraybuffer', // 或者 'arraybuffer'  
                        params: params  
                    });
                    if (response.status === 200) {
                        const url = window.URL.createObjectURL(new Blob([response.data]));
                        const link = document.createElement('a');
                        link.href = url;
                        link.setAttribute('download', fileName); // 设置下载文件的名称  
                        document.body.appendChild(link);
                        link.click();
                        window.URL.revokeObjectURL(url);
                        document.body.removeChild(link);
                    } else {
                        this.$message.error("获取失败")
                        console.error('请求失败', response); 
                    }
                } catch (error) {
                    console.error('请求出错', error);  
                }
            },
            // 获取班级信息
            async getCalssList() {
                const { data: res } = await this.$axios.get("/getClasses")
                this.classes = res.data
                this.param.classId = res.id
                this.getWorks()
            },
            // 获取该班级的作业信息
            async getWorks() {
                if(this.param.classId === null){
                    return
                }
                const { data: res } = await this.$axios.get("/grades/getWorks", {
                    params: {
                        classId: this.param.classId
                    }
                })
                if (res.code === 200) {
                    this.wakes = res.data
                    if (res.data.length > 0) {
                        this.param.wokeId = res.data[0].id
                    }
                    this.getWorkScores()
                }
            },

            // 根据classId和这个workId查询该班级的成绩信息
            async getWorkScores() {
                if(this.param.classId ===null){
                    return 
                }
                if(this.param.wokeId ===null){
                    return 
                }
                const { data: res } = await this.$axios.get("/grades/getWorkScores", {
                    params: {
                        classId: this.param.classId,
                        workId: this.param.wokeId
                    }
                })
                if (res.code === 200) {
                    // this.endTime = res.msg
                    return this.tableDate = res.data
                }
                this.$message.error("网络错误")
            },
            
            async getEndTime() {
                const { data: res } = await this.$axios.get("/grades/getEndTime", {
                    params: {
                        classId: this.param.classId,
                        workId: this.param.wokeId
                    }
                })
                if (res.code === 200) {
                    // 表示已经结束，学生不能提交答案了
                    this.endTime = res.data
                    this.endTimeFalt = true
                }
                if(res.code === 201){
                    // 表示还没有结束
                    this.endTime = res.msg
                    this.endTimeFalt = false
                }
            }
        }
    }
</script>


<style lang="less" scoped>
    .el-table {
        margin: 20px 20px 100px;
    }
</style>